<template>
  <div class="page-home">
    <div class="home-entry">
      <div class="container">
        <!-- 左侧分类 -->
        <HomeCategroy />
        <!-- banner轮播图 -->
        <HomeBanner/>
       <!-- suspense异步组件标签：1.内部只能有一个根标签;2.目前是实验性阶段，开发阶段暂时不推荐使用 -->
       <suspense>
    <template #default>
    <div>
      <!-- 新鲜好物 -->
      <HomeNew/>
       <!-- 人气推荐 -->
      <HomeHot/>
     </div>
    </template>
    <template #fallback>
      <div>
        Loading...
      </div>
    </template>
  </suspense>
      </div>
    </div>
  </div>
</template>

<script>
import HomeCategroy from '@/views/Home/components/home-categroy.vue'
import HomeBanner from '@/views/Home/components/home-banner.vue'
import HomeNew from '@/views/Home/components/home-new.vue'
// import HomeHot from '@/views/Home/components/home-hot.vue'
import { defineAsyncComponent } from 'vue'
export default {
  name: 'XtxHomePage',
  components: {
    HomeCategroy,
    HomeBanner,
    HomeNew,
    // HomeHot,
    HomeHot: defineAsyncComponent(() => import('./components/home-hot.vue'))
  }
}
</script>

<style scoped lang='less'>

</style>
